<template>
	<view>
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list" :auto="false"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">

			<view class="search-box">
				<view class="search">
					<view class="search-input">
						<image :src="ossUrl + `/static/card/11.png`" class="search-input-icon"></image>
						<input type="text" placeholder="请输入关键字" placeholder-class="search-input-ac"
							v-model="params.name" @input="init">
					</view>

				</view>
			</view>


			<view class="tabs">
				<u-subsection :list="tabs" :current="current" @change="change"></u-subsection>
			</view>
			<view class="container" v-if="current === 1">
				<view class="order-card" v-for="order in list" :key="order.id" @click="toTeaching(order)">
					<view class="order-info">
						<view class="order-number">订单号：{{ order.order }}</view>
						<view class="layout">
							<view class="course-name">{{ order.trade_name }}</view>
							<view class="paid-amount">￥{{ order.price }}</view>
						</view>
						<view class="ly">
							<view class="ly-l">
								<view class="ly-l-l">
									<image class="instructor-photo" :src="order.head" style="border-radius: 50%;"
										@click.stop="toMixinIndex(1,{userId: order.user_id})"></image>
									<view class="instructor-name">主讲：{{ order.nickname }}</view>
								</view>
								<view class="course-expiry">视频有效期倒计时：{{ order.countdown }}</view>
								<view class="course-time">{{ order.end_time }}</view>
							</view>
							<view class="ly-r">
								<view class="evaluate-button" v-if="order.evaluation_status == 1"
									@click.stop="toDetail(order)">去评价</view>
								<view class="evaluated-button ac" v-else @click.stop="toDetail(order)">已评价</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="product" v-else>
				<view class="product-list">
					<view class="list-scroll-content">
						<view v-for="(it, index) in list" :key="index" class="rf-order-item" @click="toProduct(it)">
							<view class="i-top b-b">
								<text class="time in1line">订单号：{{it.Order || ''}}</text>
								<!--<text class="time">{{item.created_at | time}}</text>-->
								<text class="state text-rf">{{getOrderStatus(it.OrderStatus)}}</text>
							</view>
							<view class="goods-box-single">
								<image class="goods-img" :src="it.ProductImage" mode="aspectFill"></image>
								<view class="right">
									<text class="title in2line">{{it.ProductName}}</text>
									<text class="attr-box">规格: {{it.Specifications}}</text>
									<text class="price">
										<text class="text-rf">￥{{it.SinglePrice || ''}} </text>
									</text>
									<text class="time">{{it.CreatedAt}}</text>
								</view>
							</view>
							<view class="price-box">
								共
								<text class="num">{{it.Quantity || ''}}</text>
								件商品 实付款
								<text class="price" :class="'text-rf'">￥{{it.TotalPrice || ''}}</text>
							</view>
							<view class="jujue" v-if="it.OrderStatus === 6">
								<text>拒绝原因：</text>{{it.ReasonForRefusal}}
							</view>
							<view class="jujue" v-if="it.OrderStatus === 3">
								<text>自动收货时间：</text>{{it.AutomaticDeliveryTime || ''}}
							</view>
							<view class="jujue" v-if="it.OrderStatus === 5">
								<text>自动退款时间：</text>{{it.AutomaticRefundTime || ''}}
							</view>
							<view class="action-box b-t">
								<button class="action-btn" :class="'text-rf'" v-if="[3].includes(it.OrderStatus)"
									@click.stop="viewLogistics(it)">
									查看物流
								</button>
								<button class="action-btn" :class="'text-rf'" v-if="[1,3].includes(it.OrderStatus)"
									@click.stop="refund(it)">
									申请退款
								</button>
								<button class="action-btn" :class="'text-rf'" v-if="[9].includes(it.OrderStatus)"
									@click.stop="returnGoods(it)">
									退货提交
								</button>
								<button class="action-btn" :class="'text-rf'"
									v-if="[5,6,8,9,10].includes(it.OrderStatus)" @click.stop="cancleRefund(it)">
									取消退款
								</button>
								<button class="action-btn" :class="'text-rf'" v-if="[6].includes(it.OrderStatus)"
									@click.stop="platformIntervention(it)">
									平台介入
								</button>

								<button class="action-btn" :class="'text-rf'"
									v-if="[4].includes(it.OrderStatus) && it.WhetherEvaluate === 1"
									@click.stop="evaluate(it)">
									评价
								</button>
								<button class="action-btn" :class="'bg-rf'" v-if="[4].includes(it.OrderStatus)"
									@click.stop="contact(it)">
									售后服务
								</button>
								<button class="action-btn" :class="'bg-rf'" v-if="[3].includes(it.OrderStatus)"
									@click.stop="sure(it)">
									确认收货
								</button>
							</view>


						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		goodsOrderList,
		InformationorderList,
		goodsCancelRefund,
		goodsPlatformIntervention,
		goodsConfirmReceipt,
		InformationMyIncome
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				tabs: ['商品', '视频'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				params: {
					name: ''
				},
				list: [],
				type: '',
				userInfo: ''
			}
		},
		onShow() {
			InformationMyIncome().then(res => {
				this.userInfo = res.data
				if (res.data.founder == 1) {
					//联创
					this.type = 3

				} else {
					this.type = 2
				}
			})
			this.$refs.paging.reload();
		},
		methods: {
			toTeaching(it) {
				uni.navigateTo({
					url: '/pagesB/teachingCourses/teachingCourses?id=' + it.course_id
				})
			},
			toProduct(it) {
				uni.navigateTo({
					url: `/pagesA/shopping/detail?id=${it.ProductID}&type=${this.type}&business_card_id=&nickname=` +
						this.userInfo.user.nickname
				})
			},
			toDetail(it) {
				uni.navigateTo({
					url: '/pagesC/evaluate/evaluate?id=' + it.id
				})
			},
			viewLogistics(it) {
				uni.setStorageSync('refundOrder', it)
				uni.navigateTo({
					url: '/pagesA/logistics/logistics?id=' + it.id
				})
			},
			evaluate(it) {
				uni.setStorageSync('refundOrder', it)
				uni.navigateTo({
					url: '/pagesA/evaluate/evaluate?id=' + it.id
				})
			},
			sure(it) {
				uni.showLoading()
				goodsConfirmReceipt({
					id: it.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: "已确认收货",
						icon: 'none'
					})
					this.$refs.paging.reload();
				})
			},
			contact(it) {
				wx.openCustomerServiceChat({
					extInfo: {
						url: it.customer_service
					},
					corpId: 'ww877049f5e74db574',
					success(res) {},
					fail(err) {
						console.log('err', err)
						uni.showToast({duration:3000,
							title: err.errMsg,
							icon: 'none'
						})
					},
				})
			},
			platformIntervention(it) {
				uni.showLoading()
				goodsPlatformIntervention({
					id: it.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: "提交成功！",
						icon: 'none'
					})
					this.$refs.paging.reload();
				})
			},
			cancleRefund(it) {
				uni.showLoading()
				goodsCancelRefund({
					id: it.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: "取消成功！",
						icon: 'none'
					})
					this.$refs.paging.reload();
				})
			},
			returnGoods(it) {
				uni.setStorageSync('refundOrder', it)
				uni.navigateTo({
					url: '/pagesA/returnGoods/returnGoods?id=' + it.id
				})
			},
			refund(it) {
				uni.setStorageSync('refundOrder', it)
				uni.navigateTo({
					url: '/pagesA/refund/refund?id=' + it.id
				})
			},
			getOrderStatus(status) {
				// 0-待支付，1-待发货，2-已发货(不用)，3-运输中，4-已完成，5-退款申请中，6-退款拒绝，7-退款成功，8-介入中，9同意退货（输入运单号,10等待商家退款
				let OrderStatus = [{
						label: '待支付',
						value: 0
					},
					{
						label: '待发货',
						value: 1
					},
					{
						label: '已发货',
						value: 2
					},
					{
						label: '运输中',
						value: 3
					},
					{
						label: '已完成',
						value: 4
					},
					{
						label: '退款申请中',
						value: 5
					},
					{
						label: '退款拒绝',
						value: 6
					},
					{
						label: '退款成功',
						value: 7
					},
					{
						label: '介入中',
						value: 8
					},
					{
						label: '同意退货',
						value: 9
					},
					{
						label: '等待退款',
						value: 10
					}
				]
				let name = ''
				try {
					name = OrderStatus.find(i => i.value === status).label
				} catch (e) {

				}
				return name
			},
			change(e) {
				
				this.current = e
				this.$refs.paging.reload();
			},
			query(pageNo, pageSize) {
			
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				
			},
			init(pageNo, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				let http = this.current === 1 ? InformationorderList : goodsOrderList
				http(params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss">
	.search-box {
		width: 100%;
		overflow: hidden;
		padding-top: 16rpx;
		padding-bottom: 6rpx;
		// z-index: 99;
		// background: #292639;
	}

	.search {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		// margin-bottom: 16rpx;

		.search-input {
			width: 690rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 27rpx;
			// margin-right: 25rpx;

			.search-input-icon {
				width: 32rpx;
				height: 32rpx;

			}

			input {
				flex: 1;
				min-width: 0;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333;
				margin-left: 11rpx;
			}

			.search-input-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7e7b8c;
			}
		}

		.search-rig {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 9rpx;
			}

			.search-rig-s {
				width: 52rpx;
				height: 25rpx;
			}

		}
	}

	.tabs {
		width: 500rpx;
		margin: 0 auto;
		padding-top: 20rpx;
	}

	page {
		background: #F6F7F8;
	}

	.product {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 20rpx;

		.product-list {
			width: 100%;

			.product-list-item {
				width: 100%;
				display: flex;
				height: 340rpx;
				border-radius: 20rpx;
				background: #fff;
				box-shadow: 0rpx 0rpx 5rpx #F6F7F8;
				margin-bottom: 20rpx;

				.product-list-item-img {
					width: 280rpx;
					height: 340rpx;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					margin-right: 20rpx;
				}

				.product-list-item-r {
					min-width: 0;
					flex: 1;
					box-sizing: border-box;
					padding: 20rpx;

					.product-list-item-r-title {
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.product-list-item-r-guige {
						width: fit-content;
						background: #F8F8F8;
						padding: 1rpx 18rpx;
						border-radius: 5rpx;
						font-size: 28rpx;
						color: #A1A0A3;
						margin-bottom: 20rpx;
					}

					.product-list-item-r-price {
						font-size: 36rpx;
						color: #E7373A;
						margin-bottom: 20rpx;
					}

					.product-list-item-r-num {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}

					.product-list-item-r-btn {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.product-btn {
							width: 100rpx;
							margin-left: 28rpx;
						}
					}

				}
			}
		}
	}

	.container {
		padding-top: 30rpx;

	}


	.order-card {
		margin: 0 auto;
		width: 690rpx;
		background-color: #fff;
		margin-bottom: 9rpx;
		border-radius: 20rpx;
	}

	.order-info {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 16rpx;

	}

	.order-number {
		font-family: PingFang;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 24rpx;
	}

	.layout {
		display: flex;
		align-items: center;
		margin-bottom: 29rpx;

		.course-name {
			flex: 1;
			min-width: 0;
			font-family: PingFang;
			font-weight: bold;
			font-size: 30rpx;
			color: #131313;
		}

		.paid-amount {
			font-family: PingFang;
			font-weight: bold;
			font-size: 34rpx;
			color: #E11919;
			padding-left: 30rpx;
		}
	}

	.ly {
		display: flex;
		width: 100%;
		display: flex;

		.ly-l {
			min-width: 0;
			flex: 1;

			.ly-l-l {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 37rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}

				.instructor-name {
					font-family: PingFang;
					font-weight: 400;
					font-size: 28rpx;
					color: #131313;
				}
			}

			.course-expiry {
				font-family: PingFang;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 19rpx;
			}

			.course-time {
				font-family: PingFang;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
		}

		.ly-r {
			margin-left: 20rpx;

			.evaluate-button {
				width: 155rpx;
				height: 66rpx;
				background: #12B475;
				border-radius: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.ac {
				width: 155rpx;
				height: 66rpx;
				background: #12B475;
				border-radius: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				background: #E5E5E5;
				color: #131313;
			}
		}
	}

	// 订单列表
	// 订单列表
	.rf-order-item {
		display: flex;
		flex-direction: column;
		padding: 0 30upx;
		background: #fff;
		margin-top: 16upx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 5rpx #F6F7F8;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.02);

			.time {
				flex: 1;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			padding-top: 10upx;
			height: 220upx;

			.goods-item {
				overflow: hidden;
				height: 100%;
				width: 160upx;
				margin-right: 16upx;
				display: inline-block;

				.goods-img {
					display: block;
					width: 100%;
					height: 140upx;
				}

				.goods-title {
					font-size: $font-sm - 2upx;
					line-height: 32upx;
				}
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			margin: 10upx 0;
			padding-bottom: 10rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.02);

			.goods-img {
				display: block;
				width: 180upx;
				height: 140upx;
			}

			.red {
				margin: 0 10upx 0 0;
				font-size: $font-sm;
			}

			.point {
				margin: 0 10upx 0 0;
				font-size: $font-sm;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-sm;
					line-height: 32upx;
					height: 60upx;
					color: $font-color-dark;
				}

				.attr-box {
					font-size: $font-sm;
					color: $font-color-light;
				}

				.time {
					font-size: $font-sm;
					color: $font-color-light;
					margin-top: 10rpx;
				}

				.price {
					font-size: $font-sm;
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 15upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			padding-bottom: 24rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.02);

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;

			.action-btn {
				width: 152upx;
				height: 56upx;
				margin: 0 0 0 $spacing-base;
				padding: 0;
				text-align: center;
				line-height: 56upx;
				font-size: $font-sm + 2upx;
			}

			.action-btn::after {
				border: 1upx solid;
			}
		}
	}

	.text-rf,
	.line-rf,
	.lines-rf {
		color: #fa436a;
	}

	.bg-rf {
		background-color: #fa436a;
		color: #ffffff;
	}

	.jujue {
		width: 100%;
		padding: 20rpx 0;
		color: #fa436a;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);

		text {
			color: #909399;
		}
	}
</style>